<template>
    <div>
        <el-row :gutter="10">
            <el-col :xs="25" :sm="25" :md="25" :lg="25">
                <div id="userRegisterChart" class="box-chart"></div>
            </el-col>
        </el-row>
    </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
.box-chart {
    height: 400px;
}
</style>
<script type="text/javascript">
// 引入基本模板
let echarts = require('echarts/lib/echarts');
// 引入柱状图组件
require('echarts/lib/chart/bar');
require('echarts/lib/chart/pie');
// 引入提示框和title组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
export default {
    name: 'hello',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    },
    mounted() {
        this.userRegisterChart();
    },
    methods: {
        userRegisterChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('userRegisterChart'))
            // 绘制图表
            myChart.setOption({
                title: {
                    show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
                    text: '用户登录统计表', //主标题文本，'\n'指定换行
                    link: '', //主标题文本超链接,默认值true
                    target: null, //指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
                    subtext: '2018年', //副标题文本，'\n'指定换行
                    sublink: '', //副标题文本超链接
                    subtarget: null, //指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
                    x: 'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
                    y: 'top', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
                    textAlign: null, //水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
                    backgroundColor: 'rgba(0,0,0,0)', //标题背景颜色，默认'rgba(0,0,0,0)'透明
                    borderColor: '#ccc', //标题边框颜色,默认'#ccc'
                    borderWidth: 0, //标题边框线宽，单位px，默认为0（无边框）
                    padding: 5, //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: '直接访问',
                    type: 'bar',
                    barWidth: '60%',
                    data: [10, 52, 200, 334, 390, 330, 220, 10, 52, 200, 334, 390]
                }]
            });
        }
    }
}
</script>